<template>
  <div>
    <van-nav-bar fixed title="商品下单统计" class="color-white bg-primary" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top ">
      <!-- 搜索栏 -->
      <top-search
        type="primary"
        :val="val"
        :area-show="areaShow"
        placeholder="请输入商品名称"
        :input-style="inputStyle"
        @search="search"
      />
      <div id="scrollBox" ref="scrollBox" class="mg-24 scrollBox">
        <productItem v-for="(item,index) in list" :key="index" :data="item" @click="goMyTeam" />
        <no-data v-if="list.length === 0" />
        <p v-if="end===true&&list.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import TopSearch from 'components/Search'
import noData from 'components/noData'
import productItem from 'components/orderCount/productItem'
import { GetProductPageList } from 'api/product'
export default {
  name: 'OrderCount',
  components: { TopSearch, productItem, noData },
  data() {
    return {
      // 搜索栏配置及数据
      areaShow: false,
      val: '',
      inputStyle: 'inputStyle-1',

      imgurl: '',
      list: [],

      // 请求参数
      requestData: {
        pageIndex: 1,
        pageSize: 10
      },

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      scollTop: 0,
      end: false

    }
  },
  computed: {
  },
  created() {
    this.GetProductPageList()
  },
  mounted() {
    this.$nextTick(function() {
      document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    search(val) {
      console.log(val)
      this.resetParam()
      if (val) {
        this.requestData.productName = val
      }
      this.GetProductPageList()
    },
    resetParam() {
      this.list = []
      this.requestData = {
        pageIndex: 1,
        pageSize: 10
      }
      this.totalAmout = 0
      this.scollRequest = true
      this.scollTop = 0
      this.end = false
    },
    goMyTeam(data) {
      this.$router.push({
        path: '/orderCount/myTeam/' + data.ID
      })
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
          console.log('触')
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          _this.scollTop = this.$utils.getScrollTop('scrollBox')
          if (_this.requestData.pageIndex < _this.totalAmout) {
            _this.requestData.pageIndex++
            _this.GetProductPageList()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    },
    GetProductPageList() {
      this.scollRequest = false
      GetProductPageList(this.requestData).then(res => {
        this.scollRequest = true
        if (res) {
          console.log(res)
          if (this.requestData.pageIndex == 1) {
            this.list = []
          }
          this.totalAmout = res.TotalAmout
          this.list = this.list.concat(res.Data)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.color-white{
  /deep/.van-nav-bar__title,/deep/.van-icon{
    color:$colorF;
  }
}
.scrollBox{
  height: calc(100vh - 230px);
  // height:300px;
  overflow-y: auto;
}
</style>
